<template>
	<el-form ref="form" :rules="rules" :model="form" status-icon label-width="80px">
			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
			<el-form-item label="‌适用人群" prop="applicable_crowd">
					<el-select id="applicable_crowd" v-model="applicable_crowd_multiple_value" multiple @change="select_applicable_crowd_multiple"
					   v-if="(form['equipment_mall_id'] && $check_field('set','applicable_crowd') ) || $check_field('add','applicable_crowd')">
				<el-option v-for="o in list_applicable_crowd" :key="o.crowd_type" :label="o.crowd_type"
						   :value="o.crowd_type">
				</el-option>
			</el-select>
			<div v-else-if="$check_field('get','applicable_crowd')">{{form['applicable_crowd']}}</div>
					</el-form-item>
		</el-col>
						<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
			<el-form-item label="商家姓名" prop="business_name">
						<el-input id="business_name" v-model="form['business_name']" placeholder="请输入商家姓名"
					v-if="(form['equipment_mall_id'] && $check_field('set','business_name') ) || $check_field('add','business_name')"></el-input>
				<div v-else-if="$check_field('get','business_name')">{{form['business_name']}}</div>
					</el-form-item>
		</el-col>
				<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
			<el-form-item label="商家电话" prop="business_phone">
						<el-input id="business_phone" v-model="form['business_phone']" placeholder="请输入商家电话"
					v-if="(form['equipment_mall_id'] && $check_field('set','business_phone') ) || $check_field('add','business_phone')"></el-input>
				<div v-else-if="$check_field('get','business_phone')">{{form['business_phone']}}</div>
					</el-form-item>
		</el-col>
	


		<el-col :xs="24" :sm="24" :lg="24" style="text-align: center;" class="el_form_btn_warp">
			<el-button type="primary" @click="submit()">提交</el-button>
			<el-button @click="cancel()">取消</el-button>
		</el-col>

	</el-form>
</template>

<script>
	import mixin from "../../mixins/component.js";

	export default {
		mixins: [mixin],
		props:{
			query: {
				type: Object,
				default: function(){
					return {
						"equipment_mall_id": 0
					}
				}
			},
			form_goods:{
				type: Object,
				default: function(){
					return {}
				}
			},
			func_check:{
				type: Function,
				default: function(fun){
					console.log("调试输出",fun);
				}
			},
			func_submit:{
				type: Function,
				default: function(fun){
					console.log("调试输出",fun);
				}
			}
		},
		data() {
			return {
				field: "equipment_mall_id",
				url_add: "~/api/equipment_mall/add?",
				url_set: "~/api/equipment_mall/set?",
				url_get_obj: "~/api/equipment_mall/get_obj?",
				url_upload: "~/api/equipment_mall/upload?",

				form: {
						"applicable_crowd":  '',
							"business_user": 0,
							"business_name":  '',
							"business_phone":  '',
					},

							applicable_crowd_multiple_value:[],
						list_applicable_crowd: [""],
				
				rules: {
					"applicable_crowd": [     {required: true,message: '‌适用人群不能为空'},  ],
					"business_user": [     {required: true,message: '商家用户不能为空'},  ],
					"business_name": [     {required: true,message: '商家姓名不能为空'},  ],
					"business_phone": [     {required: true,message: '商家电话不能为空'},  ],
				}

			}
		},
		methods: {

			/**
			 * 请求列表前
			 * @param {Object} param
			 */
			get_list_before(param) {
				var user_group = this.user.user_group;
				if (user_group !== "管理员") {
					switch (user_group) {
												case "商家用户":
							param["business_user"] = this.user.user_id;
							break;
														}
				}

				return param;
			},

	
	
				/**
			 * 获取‌适用人群列表
			 */
			async get_list_applicable_crowd() {
				var list = await this.$get("~/api/crowd_type/get_list?");
				this.list_applicable_crowd = list.result.list;
			},
							select_applicable_crowd_multiple(v){
				this.form.applicable_crowd = "";
				if (v && v.length>0){
					this.form.applicable_crowd = v.toString();
				}
			},
				
	
		
	
		
	
	
			submit(){
				this.func_check(()=>{
					this.$refs["form"].validate((valid)} => {
						if (valid) {
							this.submit();
						} else {
							console.error('error 提交失败!!');
						}
					});
				})
			},

			submit_after(){
				var source_id = this.form_goods.source_id;
				if(source_id){
					this.func_submit();
				}else{
					this.$get('~/api/equipment_mall/get_obj?',this.form,(res)=>{
						if(res.result && res.result.obj){
							this.form_goods.source_id = res.result.obj["equipment_mall_id"];
							this.func_submit();
						}else{
							console.error(res.error);
						}

					})
				}
			}
		},
		created() {
				this.get_list_applicable_crowd();
						}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
